<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 订单班列表数据
 *
 * @type {UnwrapNestedRefs<{total: number, form: {orderClassNo: string, orderClassAdministratorName: string, orderClassName: string, orderClassBusinessRoomNo: string, orderClassIntroduction: string, orderClassAdministratorNo: string, orderClassBusinessRoomName: string, orderClassCreateTime: string, orderClassStartTime: string, orderClassBusinessOrderClassHeadName: string, orderClassUpdateMan: string, orderClassEndTime: string, orderClassBusinessNo: string, orderClassCreateMan: string, orderClassState: number, orderClassStateName: string, orderClassBusinessName: string, orderClassMajorName: string, orderClassUpdateTime: string, orderClassRealityNumber: number, orderClassMajorNo: string}, formVisible: boolean, orderClassName: string, pageSize: number, tableData: *[], pageNum: number}>}
 */
const orderClassData = reactive({
    orderClassName: '',
    tableData: [],
    total: 0,
    pageSize: 6,
    pageNum: 1,
    formVisible: false, // 是否显示弹窗
    form: {
        orderClassNo: '',
        orderClassName: '',
        orderClassIntroduction: '',
        orderClassState: 0,
        orderClassStateName: '',
        orderClassRealityNumber: 0,
        orderClassStartTime: '',
        orderClassEndTime: '',
        orderClassAdministratorNo: '',
        orderClassAdministratorName: '',
        orderClassBusinessNo: '',
        orderClassBusinessName: '',
        orderClassBusinessOrderClassHeadName: '',
        orderClassBusinessRoomNo: '',
        orderClassBusinessRoomName: '',
        orderClassMajorNo: '',
        orderClassMajorName: '',
        orderClassCreateMan: '',
        orderClassCreateTime: '',
        orderClassUpdateMan: '',
        orderClassUpdateTime: '',
    }
})

/**
 * 加载订单班
 */
const loadOrderClass = () => {
    request.get(`/api/order-class/find-order-class-page-admin`, {
        params: {
            pageNum: orderClassData.pageNum,
            pageSize: orderClassData.pageSize,
            orderClassName: orderClassData.orderClassName,
        }
    }).then(res => {
        orderClassData.tableData = res.data?.list || []
        orderClassData.total = res.data?.list.map(item => item.orderClassCountNumber)[0] || 0;
    })
}
// 调用订单班加载方法，获取后台数据
loadOrderClass()

/**
 * 翻页
 */
const handelCurrentChange = () => {
    // 翻页时，重新加载数据即可
    loadOrderClass()
}

/**
 * 重置
 */
const reset = () => {
    orderClassData.orderClassName = ''
    // 重置时，重新加载数据即可
    loadOrderClass()
}
</script>

<template>
    <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
        <div class="card" style="margin-bottom: 10px;">
            <el-input style="width: 300px; margin-right: 10px;" v-model="orderClassData.orderClassName"
                      placeholder="请输入订单班名称查询"
                      :prefix-icon="Search"/>
            <el-button @click="loadOrderClass" type="primary" style="margin-left: 10px;">查询</el-button>
            <el-button @click="reset" type="info">重置</el-button>
        </div>
        <div class="card" style="margin-bottom: 10px;">
            <div>
                <el-table :data="orderClassData.tableData" style="width: 100%">
                    <el-table-column prop="orderClassNo" label="班号"/>
                    <el-table-column prop="orderClassName" label="班名" width="130px"/>
                    <el-table-column prop="orderClassAdministratorName" label="订单班管理员" width="110px"/>
                    <el-table-column prop="orderClassRealityNumber" label="人数" width="80px"/>
                    <el-table-column prop="orderClassMajorName" label="专业" width="150px"/>
                    <el-table-column prop="orderClassStartTime" label="开班时间" width="100px"/>
                    <el-table-column prop="orderClassEndTime" label="结班时间" width="100px"/>
                    <el-table-column prop="orderClassStateName" label="状态" width="100px"/>
                    <el-table-column prop="orderClassCreateTime" label="创建时间" width="100px"/>
                </el-table>
            </div>
        </div>
        <div class="card">
            <el-pagination v-model:current-page="orderClassData.pageNum"
                           v-model:page-size="orderClassData.pageSize"
                           @current-change="handelCurrentChange"
                           background layout="prev, pager, next" :total="orderClassData.total"/>
        </div>
    </div>
</template>

<style scoped>

</style>